<script setup>
// import { ref } from 'vue';
/* 在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册： */
// import { WzgTransfer } from '../modules/wzg-ui/index';

/* 穿梭框数据 */
// const data = [
//   {
//     id: 10,
//     title: '华为',
//     data: [
//       {
//         id: 1,
//         phone_name: '华为手机1',
//         disabled: false,
//         checked: false
//       },
//       {
//         id: 2,
//         phone_name: '华为手机2',
//         disabled: false,
//         checked: false
//       },
//       {
//         id: 3,
//         phone_name: '华为手机3',
//         disabled: false,
//         checked: true
//       }
//     ]
//   },
//   {
//     id: 20,
//     title: '小米',
//     data: [
//       {
//         id: 4,
//         phone_name: '小米手机1',
//         disabled: false,
//         checked: false
//       },
//       {
//         id: 5,
//         phone_name: '小米手机2',
//         disabled: true,
//         checked: false
//       },
//       {
//         id: 6,
//         phone_name: '小米手机3',
//         disabled: false,
//         checked: false
//       }
//     ]
//   },
//   {
//     id: 30,
//     title: '苹果',
//     data: [
//       {
//         id: 7,
//         phone_name: '苹果手机1',
//         disabled: false,
//         checked: false
//       },
//       {
//         id: 8,
//         phone_name: '苹果手机2',
//         disabled: false,
//         checked: false
//       },
//       {
//         id: 9,
//         phone_name: '苹果手机3',
//         disabled: false,
//         checked: false
//       }
//     ]
//   }
// ];

/* 轮播图数据 */
const carData = [
  {
    img: 'https://img.alicdn.com/imgextra/i3/6000000003908/O1CN01lhZwcf1ejumQS5Gzr_!!6000000003908-2-octopus.png'
  },
  {
    img: 'https://img.alicdn.com/imgextra/i1/6000000004237/O1CN01RKg1q31hAb5NI4OB0_!!6000000004237-0-octopus.jpg'
  },
  {
    img: 'https://gw.alicdn.com/imgextra/i2/O1CN01JLgHXC1QiAeLUmDYx_!!6000000002009-0-tps-480-672.jpg'
  }
];
</script>

<template>
  <div>
    <!-- 穿梭框 -->
    <!-- <WzgTransfer :data="data"
                 right-title="已选择"></WzgTransfer> -->
    <!-- 轮播图 -->
    <div class="container">
      <WzgCarousel :autoPlay="true" :duration="3000" :initial="0" :hasDot="true" :hasDirection="true">
        <WzgItem v-for="(item, index) in carData" :key="index">
          <img :src="item.img" alt="轮播图" class="img" @click="console.log(item)">
        </WzgItem>
      </WzgCarousel>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 480px;
  height: 660px;
  margin: 150px auto;
  /* display: flex; */
  /* overflow: hidden; */
}

.img {
  width: 100%;
}
</style>
